<template>
  <view class="fu-mask" hover-stop-propagation   @touchmove.stop.prevent >
    <view class="content">
      <!-- <image class="loading" src="../../static/loading.gif"></image> -->
      <view class="desc">loading...</view>
    </view>

  </view>
</template>

<script>

export default {
  name: "fu-loading",
  props: {
    // 是否显示遮罩
    show: {
      type: Boolean,
      default: true
    },

    // 层级z-index
    zIndex: {
      type: [Number, String],
      default: '999'
    },

    // 用户自定义样式
    customStyle: {
      type: Object,
      default () {
        return {}
      }
    },

    // 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
    zoom: {
      type: Boolean,
      default: true
    },

    // 遮罩的过渡时间，单位为ms
    duration: {
      type: [Number, String],
      default: 300
    },

    // 是否可以通过点击遮罩进行关闭
    maskClickAble: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      zoomStyle: {
        transform: ''
      },
      scale: 'scale(1.2, 1.2)'
    }
  },
  watch: {
    show(n) {

    }
  },
  computed: {

  },
  methods: {
    click() {
    }
  }
}

</script>

<style lang="scss" scoped>
  .fu-mask{
    position: fixed;
    background-color: #FBFBFB;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: transform 0.3s;
    .content{
        margin:0 auto;
        width:100%;
        position:relative;
        border:1rpx solid #FBFBFB;
        height:300rpx;
        margin-top:30%;
       .loading{
         position:absolute;
         left:50%;
         margin-left:-50rpx;
         width:80rpx;
         height:80rpx;
         margin-top:30rpx;
       }
       .desc{
         height:70rpx;
         line-height: 70rpx;
         width:100%;
         padding-left:13rpx;
         margin-top:146rpx;
         text-align: center;
       }
    }

  }
</style>
